<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<?php 
    echo static_file('app/css/public.css');
    echo static_file('app/css/demand-info.css');
?>		
		<style>
			.mui-scroll-wrapper{
				top: 0;
			}
			.circle-info-content{
				position: absolute;
				top: 0px;
				left: 0;
				bottom: 0px;
				width: 100%;
				overflow-x: hidden;
				overflow-y: auto;
				-webkit-overflow-scrolling: touch;
			}
					</style>
		<script>
			function set_font() {
				// 计算、转换布局单位
				var html = document.getElementsByTagName('html')[0];
				var designFontSize = 100,
					designWidth = 750;

				function setFontSize() {
					var winWidth = document.documentElement.getBoundingClientRect().width;
					var fontSize = winWidth / designWidth * designFontSize;

					html.style.fontSize = fontSize + 'px';
				}
				setFontSize();
				window.addEventListener('resize', function() {
					setFontSize();
				});

				return this;
			}
			set_font();
		</script>
	</head>

	<body>
		<div class="circle-info-content">
		<?php include_once VIEWS.'app/float.php'; ?>
		<div class="mui-scroll-wrapper pt124">
			<div class="mui-scroll" id="app">
				<div class="h10"></div>
				<div class="dem-head-box bgfff">
					<div class="dem-head-top f-cb">
						<div class="dem-head-top-user fl" :style="{backgroundImage: 'url('+cont.headimg+')'}"></div>
						<div class="dem-head-top-left fl">
							<div class="dem-head-top-cap personal" :data-id="cont.uid">{{cont.uname}}</div>
							<div class="dem-head-top-time">{{cont.cre_time}}</div>
						</div>
						<div class="dem-head-top-right on fr">
							<div class="dem-head-top-tab n1 fl">悬赏</div>
							<div class="dem-head-top-tab n1 fl">￥{{cont.min_money+'-'+cont.max_money}}</div>
						</div>
						<div class="dem-head-top-del fr"></div>
					</div>
					<div class="dem-head-tit f-cb">
						<div class="dem-head-top-tab n2 fl">{{cont.category}}</div>
						<div class="dem-head-tit-cap fl">{{cont.intro}}</div>
					</div>
					<ul class="dem-head-img f-cb">
						<li v-for="item in cont.imgs" :style="{backgroundImage: 'url('+item+')'}" :data-preview-src="item" data-preview-group="1"><img :data-preview-src="item" data-preview-group="1" /></li>
					</ul>
				</div>
				<div class="h10"></div>
				<div class="dem-bd-box bgfff">
					<div class="dem-bd-head f-cb">

						<div class="dem-bd-step in fl">{{cont.claim_nums}}</div>
						<div class="dem-bd-step look fl">{{cont.views}}</div>

						<!--n4-->
						<div v-if="cont.n.n4" class="dem-bd-assign fr">待指派</div>

						<!--n5-->
						<div v-if="cont.n.n5" class="dem-bd-assign fr">待申领</div>

						<!--n6-->
						<div v-if="cont.n.n6" class="dem-bd-assign fr">确认并评价</div>

						<!--n7-->
						<div v-if="cont.n.n7" class="dem-bd-assign fr">任务结束</div>

						<!--n8-->
						<div v-if="cont.n.n8" class="dem-bd-assign fr">任务撤销</div>

						<!--n9-->
						<div v-if="cont.n.n9" class="dem-bd-assign fr">任务关闭</div>

						<!--n10-->
						<div v-if="cont.n.n10" class="dem-bd-assign fr">待付款</div>

						<!--n13-->
						<div v-if="cont.n.n13" class="dem-bd-assign fr">待指派</div>

						<!--n14-->
						<div v-if="cont.n.n14" class="dem-bd-assign fr">已指派他人</div>

						<!--n16-->
						<div v-if="cont.n.n16" class="dem-bd-assign fr">待确认</div>

						<!--n17-->
						<div v-if="cont.n.n17" class="dem-bd-assign fr">任务关闭</div>

						<!--n19-->
						<div v-if="cont.n.n19" class="dem-bd-small not fr">已报名</div>

					</div>
					<div class="dem-bd-not" :class="{on:cont.claim_nums==0}"></div>
				</div>
			</div>

		</div>
		</div>

<?php 
    echo static_file('app/js/jQuery.js');
    echo static_file('app/js/vue.min.js');
?>
		<script>
			window.URL = {
				path: 'http://www.qironghome.com/api/index.php',
				path2 : 'http://www.qironghome.com/index.php'
			};

			var timeBox;

			var vm = new Vue({
				el: '#app',
				data: {
					cont: {
						time: { h: 0, m: 0, s: 0 },
						n: {
							n1: false,
							n2: false,
							n3: false,
							n4: false,
							n5: false,
							n6: false,
							n7: false,
							n8: false,
							n9: false,
							n10: false,
							n11: false,
							n12: false,
							n13: false,
							n14: false,
							n15: false,
							n16: false,
							n17: false,
							n18: false,
							n19: false
						},
						min_money: 0,
						max_money: 0
					},
					claim_list: [],
					timeCap: true
				},
				updated: function() {
					othis = $('.dem-bd-time');
					clearInterval(timeBox);
					timeBox = setInterval(function() {

						var h = parseInt(othis.find('.h').text());
						var m = parseInt(othis.find('.m').text());
						var s = parseInt(othis.find('.s').text());

						s -= 1;

						//s
						if(s == -1) {
							s = 59;
							if(m != 0) m -= 1;
						}
						//m
						if(m == 0) {
							if(h != 0) {
								m = 59;
								h -= 1;
							}
						}

						//整理格式
						if(s < 10) s = '0' + s;
						if(m < 10) m = '0' + m;
						if(h < 10) h = '0' + h;

						othis.find('.h').text(h);
						othis.find('.m').text(m);
						othis.find('.s').text(s);

						//停止计时器
						if(s == 0 && m == 0 && h == 0) {
							clearInterval(timeBox);
							//								vm.cont['n'] = { n1: false, n2: false, n3: false, n9: true };
							//倒计时结束刷新页面
							location.reload();
						}
					}, 1000);
				}
			});

			var _ = this;
			var self = {
				sign: "<?php echo @$_GET['id'];?>"
			}; //获取页面数据

			var signList = {
				need_id: self.sign,
				page: 1
			};

			_.ready = function(fun) {
				$.ajax({
					url: URL.path + '/needs/need_detailh5',
					type: 'post',
					dataType: 'json',
					data: {
						id: self.sign
					},
					success: function(res) {
						if(res.returnCode == '200') {
							var t = parseInt(res.data.countdown) - parseInt(res.data.now_time);

							if(t > 0) {
								res.data['time'] = {
									h: Math.floor(t / 60 / 60),
									m: Math.floor(t / 60 % 60),
									s: Math.floor(t % 60)
								};
							} else {
								res.data['time'] = 0;
							}

							//组织数据状态
							if(res.data.type == '1') {
								//悬赏
								switch(res.data.claim_status) {
									case '0': //0 悬赏未发布（待付款）
										res.data['n'] = { n3: true, n10: true, n11: true };
										break;
									case '1': //1 认领中(报名中)
										res.data['n'] = { n3: false };
										// 时间内没人认领

										if(res.data.is_can == 1) {
											res.data['n'].n3 = true;
										} else {
											res.data['n'].n4 = true;
										}

										//时间有没有到
										if(res.data['time'] == 0 || res.data.is_can == 0) {
											res.data['n'].n3 = false;
										} else {
											res.data['n'].n3 = true;
										}

										//倒计时
										if(res.data['time'].h == 0 && res.data['time'].m <= 60 || res.data['time'].h == 1 && res.data['time'].m == 0) { //内
											if(res.data.is_can == 1) {
												res.data['n'].n2 = true; // 延时
											}
										}

										//撤销按钮
										if(res.data['time'].h == 0 && res.data['time'].m == 0 && res.data['time'].s == 0) { //24H 外
											if(res.data.claim_nums == 0) {
												res.data['n'].n1 = true;
											} else {
												res.data['n'].n12 = true;
											}
										} else { //24H 内
											if(res.data.claim_nums == 0) {
												res.data['n'].n1 = true;
											}
										}

										break;
									case '2': //2 指派中
										if(res.data.is_can == 1) {
											res.data['n'] = { n4: true, n12: true }; //有撤销按钮
										} else {
											res.data['n'] = { n4: true }; //没有撤销按钮
										}
										break;
									case '3': //3 申领佣金
										if(res.data.is_can == 1) {
											res.data['n'] = { n5: true };
											//申述
											$('.apply-arb').show();
											$('.mui-scroll').addClass('n3');
										} else {
											res.data['n'] = { n15: true };
											//聊天
											$('.float-chat').show();
											$('.mui-scroll').addClass('n1');
										}
										break;
									case '4': //4 待评价
										if(res.data.is_can == 1) {
											res.data['n'] = { n6: true };
											$('.apply-arb').show();
											$('.mui-scroll').addClass('n3');
										} else {
											res.data['n'] = { n16: true };

											$('.float-chat').addClass('on').show();
											$('.apply-arb').show();
											$('.mui-scroll').addClass('n2');
										}
										break;
									case '5': //5 已完成
										if(res.data.is_can == 1) {
											res.data['n'] = { n7: true }; //已完成
										} else {
											res.data['n'] = { n7: true }; //已完成
										}
										break;
									case '6': //6 撤销
										res.data['n'] = { n8: true };
										break;
									case '7': //7 关闭
										if(res.data.is_can == 1) {
											res.data['n'] = { n9: true };
										} else {
											res.data['n'] = { n17: true };
										}
										break;
								}
							} else if(res.data.type == '2') {
								//活动
								if(res.data.is_can == 1) {
									res.data['n'] = { n3: true };
								} else {
									$('.float-chat').show();
									$('.mui-scroll').addClass('n1');
									$('.dem-head-top-del').hide();
									if(res.data.claim_nums != 0) {
										res.data['n'] = { n3: true, n19: true };
									} else {
										res.data['n'] = { n3: true, n18: true };
									}
								}
								$('.dem-head-top-right').removeClass('on');
								$('.dem-bd-not').text('暂无人报名');
								vm.timeCap = false;
								if(res.data['time'] == 0) {
									res.data['n'].n3 = false;
								}

							} else {
								//需求对接
								res.data['n'] = { n1: false };
								if(res.data.is_can == 1) {

								} else {
									$('.float-chat').show();
									$('.mui-scroll').addClass('n1');
									$('.dem-head-top-del').hide();
								}
								$('.dem-head-top-right').removeClass('on');
								$('.dem-bd-step.in,.dem-bd-not').hide();
							}

							vm.cont = res.data;

							//判断是否有人认领 | 是不是自己发布的
							if(res.data.claim_nums < 9 || res.data.is_can == 0) {
								$('.mui-pull-bottom-tips').hide();
							}

						} else if(res.returnCode == '401') {
							unLoginComfirm();
						}
						if(typeof fun === 'function') return fun();
					}
				});
			};

			//初次加載
			_.ready();
		</script>
	</body>